<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0" /> -->
    <title>药品说明书</title>
    <style>
      p {
        margin: 0;
      }

      strong {
        color: #000 !important;
      }

      #image-container {
        display: flex;
        align-items: center;
      }

      .speaker {
        width: 100%;
        font-size: 30px;
        display: flex;
        justify-content: space-between;
      }

      .contentImgButton {
        width: 80px;
        height: 80px;
        overflow: hidden;
      }

      /* #textarea {
      width: calc(100vw - 60px);
      font-size: 25px;
      padding: 0;
      margin: 10px 0;
      height: 800px;
    } */
      .input {
        width: 50%;
        height: 45px;
        font-size: 25px;
      }

      .button {
        background: none;
        font-size: 45px;
        margin-top: 20px;
      }

      .page {
        display: flex;
        align-items: center;
        flex-direction: column;
        padding: 20px 20px 200px 20px;
      }

      .body {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        flex-direction: column;
      }

      .title {
        width: 100%;
        text-align: center;
        font-size: 72px;
        font-weight: bold;
      }

      .title1 {
        font-size: 45px;
        width: 100%;
        text-align: center;
        font-weight: 600;
        margin-top: 20px;
      }

      .btnColor {
        background: #eef0f1;
        color: #000;
      }

      .btnImg {
        background: url('https://slhsms.kpc.com.cn/prod-api/profile/upload/static/不带字.png') no-repeat;
        background-size: 100% 100%;
        color: #fff;
      }

      .btn {
        width: 100%;
        height: 90px;
        border-radius: 8px;
        display: flex;
        justify-content: center;
        font-size: 45px;
        margin-top: 30px;
        font-weight: 400;
        align-items: center;
      }
      .encoding {
        width: 100%;
        text-align: right;
        margin-top: 20px;
        font-size: 45px;
      }

      .content {
        width: 100%;
        padding: 0 30px;
        margin-top: 30px;
      }

      .content-img {
        width: 55px;
        height: 55px;
      }

      .content-flex {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .content-title {
        font-weight: 500;
        font-size: 45px;
        margin: 10px 0;
      }

      .content-info {
        font-size: 45px;
        margin: 10px 0;
        color: #7e7d7d;
      }

      #slider-container {
        width: 65%;
        padding: 0 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .flex {
        width: 100%;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 42px;
        background: #fff;
        height: 180px;
        box-shadow: 0 0 20px 0px #d5d3d3;
      }

      .button-container {
        font-weight: 500;
        display: flex;
        justify-content: center;
        align-items: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        border: 5px solid #2c2c2c;
        padding: 15px 35px;
      }

      .fontSizeValue {
        font-weight: 500;
        font-size: 50px;
      }

      .buttonImg {
        width: 80px;
        height: 80px;
      }

      #slider {
        width: 100%;
        margin-top: 20px;
      }

      #value {
        font-size: 24px;
        margin-top: 20px;
      }
    </style>
  </head>

  <body>
    <div id="image-container"></div>
    <div class="speaker">
      <div>
        <div><span>核准日期：</span><span id="approval"></span></div>
        <div><span>修改日期：</span><span id="modify"></span></div>
      </div>
      <button class="contentImgButton" onclick="handleSpeaker()">
        <img class="content-img" src="https://slhsms.kpc.com.cn/prod-api/profile/upload/static/broadcast.png" alt="" />
      </button>
    </div>
    <div class="flex">
      文字字号：
      <div id="slider-container">
        <!-- <input type="range" id="slider" min="37" max="65" value="45"> -->
        <div class="button-container" onclick="valueDec()">
          <img class="buttonImg" src="https://slhsms.kpc.com.cn/prod-api/profile/upload/static/缩小.png" alt="" srcset="" />
          <!-- 缩小 -->
        </div>
        <div class="fontSizeValue" id="fontSizeValue">45</div>
        <div class="button-container" onclick="valueAdd()">
          <img class="buttonImg" src="https://slhsms.kpc.com.cn/prod-api/profile/upload/static/放大.png" alt="" srcset="" />
          <!-- 放大 -->
        </div>
      </div>
    </div>
    <div style="display: none">
      <button class="button" id="controll_tts">立即合成</button>
      <button class="button" id="download_pcm">下载pcm</button>
      <button class="button" id="download_wav">下载wav</button>
    </div>

    <div class="page">
      <div class="body">
        <div class="title" id="title">血塞通软胶囊说明书</div>
        <div class="title1">请仔细阅读说明书并在医师指导下使用。</div>
        <div class="btn" id="btn">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 活血祛瘀，通脉活络</div>
        <div id="FWBcontent"></div>
        <div class="btn" id="btn1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 活血祛瘀，通脉活络</div>
        <div class="encoding" id="encoding"></div>
      </div>
      <audio id="audioPlayer" controls style="display: none"></audio>

      <textarea id="textarea" style="display: none" placeholder="请输入您要合成的文本">
        春江潮水连海平，海上明月共潮生。
    </textarea
      >
      <div style="display: none">
        <div>语速([0-100])：<input class="input" id="speed" value="50" /></div>
        <div>音量([0-100])：<input class="input" id="volume" value="50" /></div>
        <div>音高([0-100])：<input class="input" id="pitch" value="50" /></div>
        <div>发音人：<input class="input" id="vcn" value="xiaoyan" /></div>
        <!-- x4_lingxiaolu_en -->
        <div>小语种(泰语)：<input style="width: 40px; height: 40px" id="tte" type="checkbox" /></div>
        <div>注意：发音人与语种会关联，小语种需要开通指定发音人</div>
      </div>

      <div id="result" style="display: none"></div>
    </div>

    <div id="result"></div>
    <script src="../base64.js"></script>
    <script src="../crypto-js.js"></script>
    <script src="../../dist/index.umd.js"></script>
    <script src="./index.js"></script>
    <script>
      //滑块
      // document.addEventListener('DOMContentLoaded', function () {
      //   var slider = document.getElementById('slider');
      // var titleElement = document.getElementsByClassName('content-title');
      //   var infoElement = document.getElementsByClassName('content-info');
      //   var title = document.getElementById('title');
      //   var title1 = document.querySelector('.title1');

      //   // 监听input事件，当滑块值改变时更新显示值
      //   slider.addEventListener('input', function () {
      // title.style.fontSize = parseInt(Number(slider.value) + 25) + 'px'
      //   title1.style.fontSize = slider.value + 'px'
      //   for (var i = 0; i < titleElement.length; i++) {
      //     titleElement[i].style.fontSize = parseInt(Number(slider.value) + 13) + 'px';
      //     infoElement[i].style.fontSize = slider.value - 1 + 'px'
      //   }
      //   });
      // });

      // 获取文本元素
      var hrefNum = window.location.href.split('=')[1]
      getContent(hrefNum)
      //获取页面所有文字
      function getTextByClassName(className) {
        const elements = document.getElementsByClassName(className)
        let allText = ''

        for (let i = 0; i < elements.length; i++) {
          let elementText = elements[i].textContent
          allText += elementText + ' '
        }

        allText = allText.trim()
        return allText
      }

      // 获取整个页面的所有文字
      var speckConent = ''
      function handleSpeak1(titleData, msgData) {
        document.getElementById('textarea').value = titleData + ',' + msgData
        //alert();
        document.getElementById('controll_tts').click()
      }
      var voiceType = 'xiaoyu'
      var allBodyTextUrl = ''
      var datlist = []
      function handleSpeak(titleData, msg, i) {
        var perParam = 0
        if (voiceType == 'xiaoyu') {
          perParam = 1
        }
        // console.log(i,datlist);
        let withoutTag = ''
        if (i || i == 0) {
          titleData = datlist[i].title
          withoutTag = datlist[i].content
        }
        if (/<[^>]+>/.test(withoutTag)) {
          msg = withoutTag.replace(/<[^>]+>/g, '')
        } else {
          msg = withoutTag
        }
        console.log(titleData, msg)

        fetch(
          'https://tsn.baidu.com/text2audio?tok=' +
            '24.ee8ce38fc0723287ab1b28f1a29e8b3a.2592000.1736909688.282335-116670895' +
            '&tex=' +
            titleData +
            ',' +
            msg +
            '&cuid=MQtX1eobGiuaFK4rbomQRDs8jHcvnms1&ctp=1&lan=zh&spd=5&pit=5&vol=5' +
            '&per=' +
            perParam +
            '&aue=3'
        )
          .then((response) => response.blob()) // 将响应转换为Blob
          .then((blob) => {
            // 创建一个URL表示此blob对象
            const blobUrl = URL.createObjectURL(blob)
            // 设置audio元素的src属性为新创建的URL
            document.getElementById('audioPlayer').src = blobUrl
            // 播放音频
            document.getElementById('audioPlayer').play()
          })
      }

      function handleSpeaker() {
        //  const allText = getTextByClassName("body").replace(/\s/g, "");
        // handleSpeak(allText)
        // handleSpeak2(allText);
        // document.getElementById("textarea").value = allText;
        //  document.getElementById('controll_tts').click();
        // handleSpeak("", allText);
        audition(allBodyTextUrl, 0)
      }
      let index = 0
      function getContent(hrefNum) {
        fetch('https://slhsms.kpc.com.cn/prod-api/system/meidicineInfo/' + hrefNum)
          .then((response) => response.json())
          .then((res) => {
            var data = res.data
            console.log(data, 'data')
            datlist = data.medicineDetails
            voiceType = data.voiceType
            allBodyTextUrl = data.voiceUrl
            var btn = document.getElementById('btn')
            var btn1 = document.getElementById('btn1')
            document.getElementById('encoding').innerHTML = data.bottomCoding

            if (data.colorType == 1) {
              btn.classList.add('btnImg')
              btn1.classList.add('btnImg')
            } else {
              btn.style.display = 'none'
              btn1.style.display = 'none'
            }

            //logo
            const images = data.logo.split(',')
            images.forEach((imageUrl) => {
              const img = document.createElement('img')
              img.src = 'https://slhsms.kpc.com.cn/prod-api' + imageUrl // 设置img元素的src属性为图片的URL
              img.alt = '' // 设置img元素的alt属性（可以根据需要为每个图片设置不同的alt）
              img.style.margin = '10px' // 可选：为图片添加一些间距
              img.style.width = '120px'
              // 将img元素插入到页面上的指定容器中
              const imageContainer = document.getElementById('image-container')
              imageContainer.appendChild(img)
            })

            document.getElementById('title').innerHTML = data.medicineCnName
            if (data.checkDate) {
              document.getElementById('approval').innerHTML = data.checkDate?.split('T')[0].replace('-', '年').replace('-', '月') + '日'
            }
            if (data.mixDate) {
              document.getElementById('modify').innerHTML = data.mixDate?.split('T')[0].replace('-', '年').replace('-', '月') + '日'
            }
            var htmlContent = ''
            for (let i = 0; i < data.medicineDetails.length; i++) {
              data.medicineDetails[i].content = removeBrTags(data.medicineDetails[i].content)
              const isBlod = data.medicineDetails[i].isBold // 假设这是你要检查的字段
              const titleClass = isBlod == 2 ? 'content-title ql-size-huge' : 'content-title'
              const infoClass = isBlod == 2 ? 'content-info ql-size-huge' : 'content-info'
              // <button onclick="handleSpeak('','','${i}')">
              htmlContent += `
              <div class="content" >
                <div class="content-flex">
                <div class="${titleClass}" >【${data.medicineDetails[i].title}】</div>
                  <button class="contentImgButton" onclick="audition('${data.medicineDetails[i].voiceUrl}',${i + 1})">
                    <img class="content-img" src='https://slhsms.kpc.com.cn/prod-api/profile/upload/static/broadcast.png' alt="" />
                  </button>
                </div>
                <div class="${infoClass}">${data.medicineDetails[i].content}</div>
              </div>`
            }
            document.getElementById('FWBcontent').innerHTML = htmlContent
          })
      }
      function audition(params, i) {
        if (params.indexOf('mp3') == -1) {
          alert('暂无语音文件,请先生成语音')
          return
        } else {
          var voiceUrl = 'https://slhsms.kpc.com.cn/prod-api/profile/upload/' + params
          // 判断音频播放
          pauseAudio(voiceUrl, i)
          //在谷歌内核中,audio.play()会返回一个promise的值，在IE内核中就不会返回任何的值
          //所以如果你要分浏览器，可以判断playPromiser的值来进行操作哦
          // this.audioObj.onended = () => { }
          // this.audioLoading = false
        }
      }
      function removeBrTags(text) {
        return text.replace(/<br\s*[\/]?>/gi, '') || text
      }
      // 暂停
      function pauseAudio(voiceUrl, i) {
        console.log(i, index, voiceUrl)
        var audioPlayer = document.getElementById('audioPlayer')
        var contentImg = document.getElementsByClassName('content-img')
        if (i == index) {
          if (audioPlayer.paused || audioPlayer.ended) {
            document.getElementById('audioPlayer').src = voiceUrl
            contentImg[i].src = 'https://slhsms.kpc.com.cn/prod-api/profile/upload/static/contentImg.gif'
            contentImg[i].style.transform = 'scale(1.2)'
            audioPlayer.play()
          } else {
            contentImg[i].src = 'https://slhsms.kpc.com.cn/prod-api/profile/upload/static/broadcast.png'
            contentImg[i].style.transform = 'scale(1)'
            audioPlayer.pause()
          }
        } else {
          for (let y = 0; y < contentImg.length; y++) {
            if (y == i) {
              document.getElementById('audioPlayer').src = voiceUrl
              contentImg[i].src = 'https://slhsms.kpc.com.cn/prod-api/profile/upload/static/contentImg.gif'
              contentImg[i].style.transform = 'scale(1.2)'
              audioPlayer.play()
            } else {
              contentImg[y].src = 'https://slhsms.kpc.com.cn/prod-api/profile/upload/static/broadcast.png'
              contentImg[y].style.transform = 'scale(1)'
            }
          }
          index = i
        }
      }
      // 监听音频播放完毕事件
      audioPlayer.addEventListener('ended', function () {
        var contentImg = document.getElementsByClassName('content-img')
        contentImg[index].src = 'https://slhsms.kpc.com.cn/prod-api/profile/upload/static/broadcast.png'
        contentImg[index].style.transform = 'scale(1)'
      })
    </script>
    <script>
      var titleElement = document.getElementsByClassName('content-title')
      var infoElement = document.getElementsByClassName('content-info')
      var title = document.getElementById('title')
      var title1 = document.querySelector('.title1')
      var qlSizeHuge = document.getElementsByClassName('ql-size-huge')
      var fontSizeValue = document.getElementById('fontSizeValue')
      // 定义字号变化的步长
      const fontSizeStep = 2 // 每次增加或减少的像素数

      // 增加
      function valueAdd() {
        title.style.fontSize = parseInt(Number(fontSizeValue.textContent) + 27 + fontSizeStep) + 'px'
        title1.style.fontSize = parseInt(Number(fontSizeValue.textContent) + fontSizeStep) + 'px'
        console.log('222', titleElement.length, qlSizeHuge.length)
        for (var i = 0; i < titleElement.length; i++) {
          titleElement[i].style.fontSize = parseInt(Number(fontSizeValue.textContent) + fontSizeStep) + 'px'
          infoElement[i].style.fontSize = parseInt(Number(fontSizeValue.textContent) + fontSizeStep) + 'px'
        }
        for (var i = 0; i < qlSizeHuge.length; i++) {
          qlSizeHuge[i].style.fontSize = parseInt(Number(fontSizeValue.textContent) + 12 + fontSizeStep) + 'px'
        }
        fontSizeValue.textContent = parseInt(Number(fontSizeValue.textContent) + fontSizeStep)
      }
      //减少
      function valueDec() {
        title.style.fontSize = parseInt(Number(fontSizeValue.textContent) + 27 - fontSizeStep) + 'px'
        title1.style.fontSize = fontSizeValue.textContent - fontSizeStep + 'px'
        for (var i = 0; i < titleElement.length; i++) {
          titleElement[i].style.fontSize = fontSizeValue.textContent - fontSizeStep + 'px'
          infoElement[i].style.fontSize = fontSizeValue.textContent - fontSizeStep + 'px'
        }
        for (var i = 0; i < qlSizeHuge.length; i++) {
          qlSizeHuge[i].style.fontSize = parseInt(Number(fontSizeValue.textContent) + 12 - fontSizeStep) + 'px'
        }
        fontSizeValue.textContent = parseInt(Number(fontSizeValue.textContent) - fontSizeStep)
      }

      window.onload = function () {
        setTimeout(() => {
          for (var i = 0; i < qlSizeHuge.length; i++) {
            qlSizeHuge[i].style.fontSize = parseInt(Number(fontSizeValue.textContent) + 12 + fontSizeStep) + 'px'
            qlSizeHuge[i].style.fontWeight = 'bold'
            qlSizeHuge[i].style.color = '#000'
          }
        }, 300)
      }
    </script>
  </body>
</html>
